<template>
  <div id="main">
      <div class="mainbo-1">
          <el-form>
            <el-row>
              <el-col :span="3" class="bel-1">
                <el-form-item label="签约状态">
                  <el-select v-model="state.stateId" clearable>
                    <el-option
                      v-for="item in state"
                      :label="item.stateType"
                      :key="item.stateId"
                      :value="item.stateId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" class="bel-2">
                <el-form-item label="服务包">
                  <el-select v-model="service.serviceId" clearable>
                    <el-option
                      v-for="item in service"
                      :key="item.serviceId"
                      :label="item.serviceType"
                      :value="item.serviceId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" class="bel-3">
                <el-form-item label="签约机构">
                  <el-select v-model="mechanism.mechanismId" clearable>
                    <el-option
                      v-for="item in mechanism"
                      :key="item.mechanismId"
                      :label="item.mechanismType"
                      :value="item.mechanismId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" id="n-1">
                <el-form-item label="">
                  <el-input
                    v-model="list.name"
                    clearable
                    placeholder="请输入名称"
                    style="200px"
                    id="n-2"
                  >
                    <!-- clearable 输入框可清除属性 -->
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :span="8" class="b-1">
              <el-button type="primary" @click="onSubmit"> 查询</el-button>
            </el-row>
          </el-form>
        </div>
    <div id="res-1">
      <div id="res-2" v-for="obj in list " :key="obj.id" @click="resident(obj.id)">
        <div id="res-5"><img src="u1699.png" alt="" id="res-img" /></div>
        <div id="res-6"><span id="sp-1">{{obj.name}}</span> <span id="sp-2">{{obj.age}}岁</span></div>
        <div id="res-7"><div id="res-3" >{{obj.signing_status===1?'签约中':'以签约'}}</div></div>
       
        <div id="res-4">{{obj.residentLabel===1?"高血压":obj.residentlabel===2?"冠心病":"高血糖"}}</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      state: [], //状态
      service: [], //服务包
      mechanism: [], //签约机构
      list: [
       {
        //  id:1,
        //  name:2,
        //  age:18,
        //  signing_status:2,
        //  residentlabel:1
       }
        
      ], // 商品所有数据
    };
  },

  mounted() {
     this.$axios({
      url: "api/inhabitant/findInhabitant",
      mounted: "GET",
    }).then((res) => {
      console.log(res);
      this.list = res.data.data;
      console.log(this.list);
    });
  this.$axios({
      url: "api/state/findState",
      mounted: "GET",
    }).then((res) => {
      console.log(res);
      this.state = res.data;
    });
    this.$axios({
      url: "api/service/findService",
      mounted: "GET",
    }).then((res) => {
      console.log(res);
      this.service = res.data;
    });
    this.$axios({
      url: "api/mechanism/findMechanism",
      mounted: "GET",
    }).then((res) => {
      console.log(res);
      this.mechanism = res.data;
    });
  },
  methods: {
    resident(val){
      // this.$router.push('/Healthy');
      this.$router.push({path:'/Healthy',query:{id:val}});
    }
  }
};
</script>

<style>
#main{
  background-color: #f2f7fb;
}
#res-7{
  float: left;
  width: 100%;
}
#res-4{
  float: left;
  width: 50%;
  height: 50px;
  /* margin-bottom: 100px; */
  margin-top: 20px;
  background-color: #fff1f0;
  -webkit-border-radius: 50px;
  margin-left: 25%;
  line-height: 50px;
  text-align: center;
  color: #fa746b;
}
#res-3{
  width: 30%;
  height: 30px;
  float: left;
  margin-left: 35%;
  margin-top: 10px;
  font-size: 80%;
  background-color: #28d094;
  -webkit-border-radius: 50px;
  line-height: 30px;
  text-align: center;
  color: #fff;

}
#sp-1{
  float: left;
  margin-left: 70px;
  font-size: 120%

}
#sp-2{
  float: left;
  font-size: 80%;
  margin-top: 10px;
  margin-left: 5px;
}
#res-6{
  float: left;
  width: 100%;
  margin-top: 10px;
}
#res-5 {
  width: 80px;
  height: 80px;
  float: left;
  background-color: rgb(26, 227, 127);
  background-color: #fff;
  -webkit-border-radius: 90px;
  border: 1px solid rgb(73, 67, 67);
  margin-left: 30%;
  margin-top: 10px  ;
}
#res-img {
  width: 70%;
  height: 70%;
  margin-left: 15%;
  margin-top: 15%;
}
#res-2 {
  width: 18%;
  height: 250px;
  background-color: #fff;
  float: left;
  margin-top: 20px;
  margin-bottom: 50px;
  margin-left: 1.7%;
  box-shadow:  0px 0px 3px 3px rgb(241, 236, 236);
   background-color: #fff;
            -webkit-border-radius: 30px;
}
#res-2:hover{
  background-color: #f5f9fb;
}
#res-1 {
  width: 94%;
  /* height: 1000px; */
  margin-left: 3%;
  float: left;
  /* background-color: red; */
  background-color: #fff;
  margin-top: 10px;
}
.b-1 {
  /* margin-left: 1000px; */
  float: left;
  margin-left: 780px;
}
.b-2 {
  float: left;
  margin-left: 30px;
}
.b-3 {
  float: left;
  margin-left: 30px;
}
#n-1 {
  margin-top: 20px;
  margin-left: 50px;
}
.bel-1 {
  margin-left: 50px;
  width: 300px;
  margin-top: 30px;
}
.bel-2 {
  margin-left: 50px;
  width: 300px;
  margin-top: 30px;
}
.bel-3 {
  margin-left: 50px;
  width: 300px;
  margin-top: 30px;
}
#time {
  margin-top: 20px;
  margin-left: 50px;
}
.mainbo-1 {
  width: 94%;
  height: 200px;
  margin-left: 3%;
  float: left;
  position: relative;
  background-color: #fff;
}
</style>